<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-box">
      <view class="search-input">
        <image src="/static/images/图标/搜索.png" mode="aspectFit" class="search-icon"></image>
        <input type="text" placeholder="搜索法律资讯、律师、服务" />
      </view>
    </view>

    <!-- 轮播图 -->
    <swiper class="banner" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="item.image" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!-- 业务范围 -->
    <view class="service-section">
      <view class="section-title">业务范围</view>
      <view class="service-grid">
        <view class="service-item" v-for="(item, index) in serviceList" :key="index" @tap="navigateToService(item)">
          <image :src="item.icon" mode="aspectFit"></image>
          <text>{{item.name}}</text>
        </view>
      </view>
    </view>

    <!-- 经典案例 -->
    <view class="case-section">
      <view class="section-header">
        <text class="section-title">经典案例</text>
        <text class="more-link" @tap="navigateToCaseList">更多 ></text>
      </view>
      <view class="case-list">
        <view class="case-item" v-for="(item, index) in caseList" :key="index" @tap="navigateToCase(item)">
          <image :src="item.coverImage" mode="aspectFill"></image>
          <view class="case-info">
            <text class="case-title">{{item.caseTitle}}</text>
            <text class="case-category">{{item.caseCategory}}</text>
            <text class="case-desc">{{item.caseContent}}</text>
          </view>
        </view>
      </view>
      <view class="empty-tip" v-if="caseList.length === 0">
        暂无案例数据
      </view>
    </view>

    <!-- 律师团队 -->
    <view class="team-section">
      <view class="section-title">我们的团队</view>
      <scroll-view scroll-x class="team-scroll">
        <view class="team-list">
          <view class="team-item" v-for="(item, index) in teamList" :key="index" @tap="navigateToTeam(item)">
            <image :src="item.avatar" mode="aspectFill"></image>
            <text class="lawyer-name">{{item.name}}</text>
            <text class="lawyer-title">{{item.title}}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 服务单位 -->
    <view class="partner-section">
      <view class="section-title">服务单位</view>
      <view class="partner-list">
        <view class="partner-item" v-for="(item, index) in partnerList" :key="index">
          <image :src="item.logo" mode="aspectFit"></image>
          <text>{{item.name}}</text>
        </view>
      </view>
    </view>

    <!-- 法律法规 -->
    <view class="law-section">
      <view class="section-title">法律法规</view>
      <view class="law-list">
        <view class="law-item" v-for="(item, index) in lawList" :key="index" @tap="navigateToLaw(item)">
          <text class="law-title">{{item.title}}</text>
          <text class="law-date">{{item.date}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCaseList } from '@/api/case'

export default {
  data() {
    return {
      bannerList: [
        { image: '/static/images/banner/轮播图1.jpeg' },
        { image: '/static/images/banner/轮播图2.jpg' },
        { image: '/static/images/banner/轮播图3.jpg' },
        { image: '/static/images/banner/轮播图4.jpg' }
      ],
      serviceList: [
        { name: '婚姻家庭', icon: '/static/images/图标/雨伞.png', id: 1 },
        { name: '民事经济', icon: '/static/images/图标/金融法律.png', id: 2 },
        { name: '房产纠纷', icon: '/static/images/图标/首页(1).png', id: 3 },
        { name: '交通事故', icon: '/static/images/图标/交通事故.png', id: 4 },
        { name: '合同纠纷', icon: '/static/images/图标/手提包.png', id: 5 },
        { name: '刑事辩护', icon: '/static/images/图标/法律诉讼.png', id: 6 },
        { name: '金融法律', icon: '/static/images/图标/理财.png', id: 7 },
        { name: '劳动纠纷', icon: '/static/images/图标/铁锤.png', id: 8 }
      ],
      caseList: [],
      teamList: [
        {
          id: 1,
          name: '张律师',
          title: '资深婚姻家事律师',
          avatar: '/static/images/图片素材/律师1.jpg'
        },
        {
          id: 2,
          name: '李律师',
          title: '劳动法专家',
          avatar: '/static/images/图片素材/律师2.jpg'
        },
        {
          id: 3,
          name: '王律师',
          title: '刑事辩护专家',
          avatar: '/static/images/图片素材/律师3.jpg'
        },
        {
          id: 4,
          name: '赵律师',
          title: '合同纠纷专家',
          avatar: '/static/images/图片素材/律师4.jpg'
        }
      ],
      partnerList: [
        {
          name: '法律援助中心',
          logo: '/static/images/图标/法律诉讼.png'
        },
        {
          name: '市司法局',
          logo: '/static/images/图标/铁锤.png'
        },
        {
          name: '市律师协会',
          logo: '/static/images/图标/公文包.png'
        },
        {
          name: '市总工会',
          logo: '/static/images/图标/保护.png'
        }
      ],
      lawList: [
        {
          id: 1,
          title: '中华人民共和国民法典',
          date: '2021-01-01'
        },
        {
          id: 2,
          title: '中华人民共和国劳动法',
          date: '2020-12-01'
        },
        {
          id: 3,
          title: '中华人民共和国婚姻法',
          date: '2020-11-01'
        }
      ]
    }
  },
  onLoad() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        // 获取经典案例数据，使用分页参数
        const response = await getCaseList({
          pageSize: 4,
          pageNum: 1,
          orderByColumn: 'createTime', // 按创建时间排序
          isAsc: 'desc' // 降序排列
        })
        
        if (response.code === 200) {
          this.caseList = (response.rows || []).map(item => ({
            caseId: item.caseId,
            caseTitle: item.caseTitle || '暂无标题',
            caseCategory: this.getCaseCategoryText(item.caseCategory),
            caseContent: item.caseContent || '暂无内容',
            coverImage: item.coverImage || '/static/images/case-default.jpg'
          }))
        } else {
          throw new Error(response.msg || '获取数据失败')
        }
      } catch (error) {
        console.error('获取案例数据失败:', error)
        uni.showToast({
          title: '获取案例数据失败',
          icon: 'none'
        })
      }
    },

    getCaseCategoryText(category) {
      const categoryMap = {
        'civil': '民事案件',
        'criminal': '刑事案件',
        'administrative': '行政案件',
        'economic': '经济案件'
      }
      return categoryMap[category] || category
    },

    navigateToService(item) {
      uni.navigateTo({
        url: `/pages/service/detail?id=${item.id}`
      })
    },

    navigateToCase(item) {
      uni.navigateTo({
        url: `/pages/case/detail?id=${item.caseId}`
      })
    },

    navigateToCaseList() {
      uni.navigateTo({
        url: '/pages/case/list'
      })
    },

    navigateToTeam(item) {
      uni.navigateTo({
        url: `/pages/team/detail?id=${item.id}`
      })
    },

    navigateToLaw(item) {
      uni.navigateTo({
        url: `/pages/law/detail?id=${item.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding-bottom: 30rpx;
}

.search-box {
  padding: 20rpx;
  background-color: #fff;
  
  .search-input {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 10rpx 20rpx;
    border-radius: 30rpx;
    
    .search-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }
    
    input {
      flex: 1;
      font-size: 28rpx;
    }
  }
}

.banner {
  height: 400rpx;
  
  image {
    width: 100%;
    height: 100%;
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 20rpx;
  
  .more-link {
    font-size: 28rpx;
    color: #666;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 30rpx 20rpx;
}

.service-section {
  background-color: #fff;
  margin-top: 20rpx;
  
  .service-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20rpx;
    
    .service-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx 0;
      
      image {
        width: 80rpx;
        height: 80rpx;
        padding: 10rpx;
        box-sizing: border-box;
      }
      
      text {
        font-size: 24rpx;
        margin-top: 10rpx;
      }
    }
  }
}

.case-section {
  background-color: #fff;
  margin-top: 20rpx;
  
  .case-list {
    padding: 0 20rpx;
    
    .case-item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;
      
      image {
        width: 200rpx;
        height: 150rpx;
        border-radius: 8rpx;
      }
      
      .case-info {
        flex: 1;
        margin-left: 20rpx;
        
        .case-title {
          font-size: 28rpx;
          font-weight: bold;
        }
        
        .case-category {
          font-size: 24rpx;
          color: #1890ff;
          margin-top: 8rpx;
        }
        
        .case-desc {
          font-size: 24rpx;
          color: #666;
          margin-top: 8rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
  
  .empty-tip {
    text-align: center;
    padding: 40rpx;
    color: #999;
    font-size: 28rpx;
  }
}

.team-section {
  background-color: #fff;
  margin-top: 20rpx;
  
  .team-scroll {
    width: 100%;
    
    .team-list {
      display: flex;
      padding: 0 20rpx;
      overflow-x: auto;
      
      .team-item {
        flex: 0 0 160rpx;
        margin-right: 20rpx;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          border: 2rpx solid #f0f0f0;
        }
        
        .lawyer-name {
          font-size: 28rpx;
          margin-top: 16rpx;
          color: #333;
          white-space: normal;
          word-break: break-all;
        }
        
        .lawyer-title {
          font-size: 24rpx;
          color: #666;
          margin-top: 8rpx;
          white-space: normal;
          word-break: break-all;
          line-height: 1.4;
        }
      }
    }
  }
}

.partner-section {
  background-color: #fff;
  margin-top: 20rpx;
  
  .partner-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20rpx;
    
    .partner-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx 0;
      
      image {
        width: 100rpx;
        height: 100rpx;
      }
      
      text {
        font-size: 24rpx;
        margin-top: 10rpx;
      }
    }
  }
}

.law-section {
  background-color: #fff;
  margin-top: 20rpx;
  
  .law-list {
    padding: 0 20rpx;
    
    .law-item {
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;
      
      .law-title {
        font-size: 28rpx;
      }
      
      .law-date {
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
      }
    }
  }
}
</style>
